<template>
	<view class="address-container">
		<!-- 地址栏 -->
		<view class="address-row" @click="onWithdrawClick">
			<image src="../../../static/地图标注.png" class="icon"></image>
			<text class="address">{{ address }}</text>
			<image src="../../../static/刷新.png" class="icon1" @click="refreshAddress"></image>
		</view>

		<!-- 服务项 -->
		<view class="service-container">
			<view class="service-item" v-for="(service, index) in services" :key="index">
				<view class="icon-wrapper">
					<image src="../../../static/小汽车.png" class="icon2"></image>
				</view>
				<text class="service-text">{{ service.name }}</text>
			</view>
		</view>

		<!-- 地图 -->
		<view class="main-container">
			<view class="title" @tap="nearby_search">附近加油站</view>
			<view class="action-container">
				<text class="link">全部</text>
				<image class="icon3" src="/static/向右3.png" />
			</view>

			<map style="height: 400rpx; width: 100%; " :latitude="latitude" :longitude="longitude" scale="14"
				:markers="markers" @markertap="showMarker" />
		</view>

		<!-- 优惠团购 -->
		<view class="main-container1">
			<view class="title" @tap="nearby_search">优惠团购</view>
			<view class="action-container" @click="onWithdrawClick1">
				<text class="link">更多</text>
				<image class="icon3" src="/static/向右3.png" />
			</view>
		</view>
		<view class="card-container" @click="onWithdrawClick2">
			<view class="card" v-for="(item, index) in cards" :key="index">
				<image class="card-image" :src="item.image" mode="aspectFill" />
				<view class="card-content">
					<text class="card-title">{{ item.title }}</text>
				</view>
			</view>
		</view>


		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-bar-item" @click="navigateToHome">
				<image class="icon" src="/static/首页.png"></image>
				<text class="tab-text">首页</text>
			</view>
			<view class="center-button" @click="navigateToNotifications">
				<image class="center-icon" src="/static/icon-服务概览-报警.png"></image>
			</view>
			<view class="tab-bar-item1" @click="navigateToProfile">
				<image class="icon" src="/static/我的.png"></image>
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../../../static/qqmap-wx-jssdk.min.js');
	var qqmapsdk;

	export default {
		data() {
			return {
				latitude: "",
				longitude: "",
				markers: [],

				cards: [{
						image: '/static/7.jpg', // 确保路径正确
						title: '北京四日追花拍摄秘籍——故宫'
					},
					{
						image: '/static/7.jpg', // 确保路径正确
						title: '北京四日追花拍摄秘籍——故宫'
					}
				],

				services: [{
						name: '车辆维修',
						icon: '../../../static/小汽车.png'
					},
					{
						name: '汽车保养',
						icon: '../../../static/小汽车.png'
					},
					{
						name: '专业洗车',
						icon: '../../../static/小汽车.png'
					},
					{
						name: '就近加油',
						icon: '../../../static/小汽车.png'
					}
				],

				address: '焦作市山阳区人民路32号'
			};
		},
		onLoad: function() {
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'MAKBZ-B6SKV-HEVPC-53CRU-2AIGS-DDBSI'
			});
		},
		onReady() {
			this.getMyPosition()
		},
		methods: {
			//跳转页面
			onWithdrawClick() {
				uni.navigateTo({
					url: "/pages/szy-ZhuYe/choicechengshi/choicechengshi"
				})
			},
			onWithdrawClick1() {
				uni.navigateTo({
					url: "/pages/szy-YouHuiTuanGou/youhuituangou/youhuituangou"
				})
			},
			onWithdrawClick2() {
				uni.navigateTo({
					url: "/pages/szy-YouHuiTuanGou/xiangqing/xiangqing"
				})
			},


			getMyPosition() {
				const that = this;
				uni.getLocation({
					success(resp) {
						console.log(resp);
						that.latitude = resp.latitude
						that.longitude = resp.longitude
					}
				})
			},
			showMarker(res) {
				console.log(res);
				console.log("marker");
			},
			//附近的加油站
			nearby_search() {
				var _this = this;
				// 调用接口
				qqmapsdk.search({
					keyword: '加油站', //搜索关键词
					location: { //设置周边搜索中心点
						latitude: _this.latitude,
						longitude: _this.longitude
					},
					success: function(res) { //搜索成功后的回调
						var mks = []
						for (var i = 0; i < res.data.length; i++) {
							mks.push({ // 获取返回结果，放到mks数组中
								title: res.data[i].title,
								id: res.data[i].id,
								latitude: res.data[i].location.lat,
								longitude: res.data[i].location.lng,
								//iconPath: "/resources/my_marker.png", //图标路径
								width: 10,
								height: 20
							})
						}
						//设置markers属性，将搜索结果显示在地图中
						_this.markers = mks;
					},
					fail: function(res) {
						console.log(res);
					},
					complete: function(res) {
						console.log(res);
					}
				});
			},


			navigateToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			navigateToNotifications() {
				uni.switchTab({
					url: '/pages/notifications/notifications'
				});
			},
			navigateToProfile() {
				uni.switchTab({
					url: '/pages/profile/profile'
				});
			},
			refreshAddress() {
				// 在这里添加刷新逻辑
				console.log('地址已刷新');
			}
		}
	}
</script>

<style>
	.address-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: white;
	}

	.address-row {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: white;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 60px;
		background-color: #ffffff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.tab-bar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: -40px;
	}

	.tab-bar-item1 {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: -40px;
	}

	.tab-text {
		margin-top: 4px;
	}

	.center-button {
		border-radius: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translateY(-15px);
		box-shadow: 0 4px 8px rgba(255, 77, 77, 0.4);
		z-index: 1;
	}

	.icon {
		width: 24px;
		height: 24px;
	}

	.icon1 {
		width: 18px;
		height: 18px;
		margin-left: 80px;
	}

	.icon2 {
		width: 40px;
		height: 40px;
	}

	.center-icon {
		width: 50px;
		height: 50px;
	}

	.refresh-button {
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.address {
		margin-left: 20px;
	}

	.service-container {
		display: flex;
		justify-content: space-around;
		padding: 70px 0;
		margin-top: -10px;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-wrapper {
		border-radius: 20px;
		background-color: white;
		padding: 10px 15px;
		margin-bottom: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.service-text {
		font-size: 14px;
		color: #333;
		text-align: center;
	}

	.main-container {
		border-radius: 8px;
		/* 圆角效果 */
		display: flex;
		flex-direction: column;
		/* 纵向布局 */
		margin-top: -40px;
	}

	.main-container1 {
		border-radius: 8px;
		/* 圆角效果 */
		display: flex;
		flex-direction: column;
		/* 纵向布局 */
		margin-top: 20px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-left: 20px;

	}

	.action-container {
		display: flex;
		align-items: center;
		margin-left: 320px;
		margin-top: -17px;
		margin-bottom: 3px;
	}

	.link {
		color: #59B6E6;
		font-size: 14px;
		margin-right: 5px;
	}

	.icon3 {
		width: 16px;
		height: 16px;
	}

	.card-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 16px;
	}

	.card {
		width: 48%;
		/* 改为48%以确保边距 */
		border: 1px solid #ccc;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	}

	.card-image {
		width: 100%;
		height: 120px;
		/* 固定高度用于展示 */
	}

	.card-content {
		padding: 10px;
	}

	.card-title {
		font-size: 16px;
		font-weight: bold;
		margin-top: 5px;
	}
</style>